<template>
  <div class="main-form">
    <el-form
      :model="ruleFormData"
      :rules="showRules"
      ref="ruleForm"
      class="search-ruleForm"
      :label-width="'85px'"
      inline
    >
      <el-form-item
        v-for="m in ruleFormRow"
        :key="m.prop"
        :label="m.label"
        :prop="m.prop"
        size="mini"
      >
        <el-input
          v-if="m.type === 'input'"
          v-model="ruleFormData[m.prop]"
          :placeholder="m.placeholder"
          :disabled="m.disabled"
          :readonly="m.readonly"
        ></el-input>

        <slot v-if="m.slot" :name="m.slot"></slot>

        <el-select
          v-if="m.type === 'select' && !m.apiData"
          v-model="ruleFormData[m.prop]"
          :filterable="m.filterable"
          :multiple="m.multiple"
          :placeholder="m.placeholder"
          :disabled="m.disabled"
          :readonly="m.readonly"
          @change="
            val => {
              getSelectText(val, m)
            }
          "
        >
          <el-option
            v-for="n in m.options"
            :key="n.value"
            :label="n[m.key]"
            :value="n[m.value]"
          ></el-option>
        </el-select>

        <el-select
          v-if="m.type === 'select' && m.apiData"
          v-model="ruleFormData[m.prop]"
          :filterable="m.filterable"
          :multiple="m.multiple"
          :placeholder="m.placeholder"
          :disabled="m.disabled"
          :readonly="m.readonly"
          @change="
            val => {
              getSelectText(val, m)
            }
          "
        >
          <el-option
            v-for="n in ajaxData[m.apiData.apiname]"
            :key="n.value"
            :label="n[m.key]"
            :value="n[m.value]"
          ></el-option>
        </el-select>

        <el-date-picker
          style="width: 205px;"
          :clearable="false"
          :picker-options="m.pickerOptions"
          @change="
            val => {
              getDate(val, m)
            }
          "
          value-format="yyyy-MM-dd"
          v-if="m.type === 'date'"
          type="date"
          :disabled="m.disabled"
          :readonly="m.readonly"
          :placeholder="m.placeholder"
          v-model="ruleFormData[m.prop]"
        ></el-date-picker>
      </el-form-item>

      <div class="botton-row">
        <slot name="search-slot"></slot>
        <el-button @click="resetForm">清除条件</el-button>
        <el-button @click="doSearch" type="primary">搜索</el-button>
        <el-button v-if="showExport" @click="doExport" type="primary"
          >导出</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'search-form',
  props: {
    ruleFormData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    showExport: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    ruleFormRow: {
      type: Array,
      default: () => {
        return []
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      showRules: {},
      ajaxData: {},
      key: ''
    }
  },
  created() {
    Object.keys(this.ruleFormData).forEach(k => {
      this.rules && this.rules[k]
        ? (this.showRules[k] = this.rules[k])
        : (this.showRules[k] = [])
    })
    // this.doSearch();
  },
  mounted() {
    this.ruleFormRow.forEach(item => {
      if (item.apiData) {
        this.$set(this.ajaxData, item.apiData.apiname, [])
        this.$http(item.apiData.url, item.apiData.data, {
          ajaxType: 'none'
        }).then(res => {
          let datas = Array.isArray(res.body) ? res.body : res.body.rows
          this.$set(
            this.ajaxData,
            item.apiData.apiname,
            item.apiData.issort ? datas.reverse() : datas
          )
        })
      }
    })
  },
  methods: {
    awaitAjax(data) {
      data.forEach(item => {
        this.$set(this.ajaxData, item.apiname, [])
        this.$http(item.url, item.data, { ajaxType: 'none' }).then(res => {
          let datas = Array.isArray(res.body) ? res.body : res.body.rows
          this.$set(
            this.ajaxData,
            item.apiname,
            item.issort ? datas.reverse() : datas
          )
        })
      })
    },
    getDate(val, m) {
      this.$set(this.ruleFormData, m.prop, !val ? '' : val)
      if (m.listener) {
        this.$emit('dateChange', this.ruleFormData[m.prop])
      }
    },
    getSelectText(val, row) {
      let k = row.apiData ? this.ajaxData[row.apiData.apiname] : row.options
      if (row.selectText && !row.multiple) {
        this.ruleFormData[row.selectText] = k.find(item => {
          return item[row.value] === val
        })[row.key]
      }
      row.apiData && row.apiData.listener
        ? this.$emit('formSelectChange', { val, row, k })
        : null
    },
    resetForm() {
      this.$resetForm(this.$refs.ruleForm)
      this.$emit('resetForm')
    },
    doSearch() {
      this.$emit('doSearch', this.ruleFormData)
    },
    doExport() {
      this.$emit('doExport', this.ruleFormData)
    }
  }
}
</script>
<style lang="scss">
.main-form {
  padding: 20px;
  padding-bottom: 0;
  
  .botton-row {
    margin-bottom: 20px;
    text-align: right;
  }
  
  .search-ruleForm {
    border-top: 1px solid #dadada;
    padding-top: 20px;
    
    .el-form-item {
      width: 290px;
      margin-right: 42px;
      
      &:nth-child(3n) {
        margin-right: 0px;
      }
    }
    
    .slot {
      width: 205px;
    }
    
    .el-select,
    .el-input,
    .el-date-editor {
      width: 205px;
    }
  }
}
</style>
